<template>
	<view class="container" @tap="onClickBgView">
		<view @tap.stop="onStopClick" class="erji">
			<view
				style="background-color: white;height: 60rpx;width: 100vw;display: flex;justify-content: space-between;padding-top: 20rpx;">
				<view style="background-color: transparent;">
					<text style="margin-left: 40rpx;font-size: 34rpx;">职业库</text>
					<text style="margin-left: 10rpx;font-size: 26rpx;color: #999;">已选 {{selNum}}/5</text>
				</view>
				<image src="https://mcdn.chatgk.com/xcx/static/images/chancePageImg/gb.png"
					style="height: 60rpx;width: 60rpx;margin-right: 26rpx;" @tap="close"></image>
			</view>
			<view class="flex-row sortList-left" :style="'max-height:' + maxHeight + 'vh;' ">
				<scroll-view style="background-color: #f8f8f8; width: 300rpx; "
					:style="'max-height:' + maxHeight + 'vh;'" scroll-y="true">
					<view class="flex-column">
						<!-- <text class="text-group" style="padding: 15rpx 0;" :class="selGroupIndex == -1 ? 'select':''"
							@tap="onClickGroupCell({}, -1)">不限</text> -->
						<view class="flex-row sortList-left-item" v-for="(group, index) in data" :key="group.code">
							<text class="text-group" :class="selGroupIndex == index ? 'select':''"
								@tap="onClickGroupCell(group, index)">{{group.name + '(' + group?.children.length + ')'}}</text>
						</view>
					</view>
				</scroll-view>

				<scroll-view style="background-color: #fff; width: 100%;" :style="'max-height:' + maxHeight + 'vh;'"
					scroll-y="true">
					<view class="flex-column">
						<!-- <text class="text-value" :class="getAllCellSelectClass()" @tap="onClickAllValueCell">全部</text> -->
						<view v-if="selGroupIndex >= 0" class="flex-row view-list-value"
							v-for="(item, index) in data[selGroupIndex]?.children" :key="item.code">
							<text class="text-value" :class="getSelectClass(item)"
								@tap="onClickValueCell(item, index)">{{item.name}}</text>
							<image style="width: 40rpx; height: 40rpx;margin-top: 15rpx; margin-right: 40rpx;"
								:src="'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' + (getSelectState(item) ? 's.png':'n.png')"
								mode="aspectFit" @tap.stop="onClickValueCell(item, index)"></image>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="flex-row space-around container-button">
				<button class="button reset" @tap="onClickReset">清空</button>
				<button class="button ok" @tap="onClickStartFilter">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: []
			},
			maxHeight: {
				type: Number,
				default: 80
			}
		},
		data() {
			return {
				workInfos: [],
				selectData: {},
				selGroupIndex: 0,
				selNum: 0
			}
		},
		watch: {
			data: {
				handler(newVal) {

					// 	newVal.forEach(info => {
					// 		info.children.forEach(works => {
					// 			this.workInfos.push(works)
					// 		})
					// 	})
					this.workInfos = newVal
				}
			},
			selectData: {
				handler(newVal) {
					const keys = Object.keys(newVal)
					if (keys.length > 0) {
						this.selGroupIndex = Number(keys[keys.length - 1])
					}

					let count = 0;
					for (let key in newVal) {
						if (newVal.hasOwnProperty(key)) {
							count += newVal[key].length;
						}
					}
					this.selNum = count
				},
				immediate: true
			}
		},
		methods: {
			close() {
				this.$emit('opensub')
			},
			// 点击背景其他位置隐藏筛选
			onClickBgView() {
				this.$emit("onClickHideScreening")
			},
			// 点击组cell
			onClickGroupCell(group, index) {
				this.selGroupIndex = index

				if (index == -1) {
					this.selectData = {}
				}
			},
			// 点击值Cell
			onClickValueCell(item, index) {

				if (!this.selectData[this.selGroupIndex]) {
					this.selectData[this.selGroupIndex] = []
				}

				const findIndex = this.selectData[this.selGroupIndex].findIndex(i => i.code == item.code)

				if (findIndex > -1) {
					this.selectData[this.selGroupIndex].splice(findIndex, 1)
				} else {
					if (this.selNum >= 5) {
						uni.showToast({
							title: "无法选择更多",
							icon: 'none'
						})
					} else {
						this.selectData[this.selGroupIndex].push(item)
					}
				}

				let count = 0;
				for (let key in this.selectData) {
					if (this.selectData.hasOwnProperty(key)) {
						count += this.selectData[key].length;
					}
				}
				this.selNum = count
			},
			// 点击全部按钮
			onClickAllValueCell() {
				const isSelect = this.getAllCellSelectClass() == 'select'

				this.selectData[this.selGroupIndex] = []
				if (!isSelect) {
					const groups = this.workInfos[this.selGroupIndex]
					groups?.children.forEach(info => {
						this.selectData[this.selGroupIndex].push(info)
					})
				}
			},
			// 点击重置
			onClickReset() {
				this.selectData = {}
			},
			// 点击确定
			onClickStartFilter() {
				this.$emit("onClickStartFilter", this.selectData)
			},
			// 获取筛选项选中样式
			getSelectClass(item) {
				if (!this.selectData[this.selGroupIndex]) {
					return ''
				} else {
					return this.selectData[this.selGroupIndex].some(i => i.code == item.code) ? 'select' : ''
				}
			},
			// 获取筛选项选中样式
			getSelectState(item) {
				if (!this.selectData[this.selGroupIndex]) {
					return false
				} else {
					return this.selectData[this.selGroupIndex].some(i => i.code == item.code) ? true : false
				}
			},
			// 获取全部cell选中样式
			// getAllCellSelectClass() {
			// 	if (this.selGroupIndex == -1) {
			// 		return 'select'
			// 	} else if (!this.selectData[this.selGroupIndex]) {
			// 		return ''
			// 	} else {
			// 		const groups = this.workInfos[this.selGroupIndex]

			// 		let isAll = true
			// 		groups.children.forEach(info => {
			// 			if (isAll) {
			// 				isAll = this.selectData[this.selGroupIndex].some(i => i.code == info.code)
			// 			}
			// 		})

			// 		return isAll ? 'select' : ''
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	view {
		background-color: #f8f8f8;
	}

	.container {
		height: 100vh;
		width: 100vw;
		/* border-radius: 100rpx 100rpx 0 0; */
		background-color: rgba(0, 0, 0, 0.6);
		box-sizing: border-box;
		overflow: hidden;
	}

	.erji {
		width: 100vw;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		overflow: hidden;
	}

	.sortList-left {
		display: flex;
		flex-direction: row;

		.sortList-left-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}


	.view-list-value {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.text-group {
		color: #464646;
		font-size: 26rpx;
		width: 250rpx;
		padding: 15rpx 20rpx;
		text-align: center;
		background-color: #f8f8f8;
		border-bottom: #fff solid 2rpx;

	}

	.text-group.select {
		background-color: #fff;
		color: #FF3B0A;
	}

	.text-value {
		background-color: #fff;
		color: #464646;
		font-size: 26rpx;
		width: 100%;
		padding: 15rpx 30rpx 15rpx 56rpx;
		border-bottom: #f8f8f8 solid 2rpx;
	}

	.text-value.select {
		color: #FF3B0A;
	}

	.container-button {
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
	}

	.button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 38rpx;
	}

	.button.reset {
		color: #FF3B0A;
		background-color: white;
		border: #FF3B0A 2rpx solid;
	}

	.button.ok {
		color: #FFF;
		background: #FF3B0A;
	}
</style>